<template>
  <view class="content" :style="contentStyle" v-if="show" @click="hidePop">
    <view class="operation-box" :style="operationBoxStyle">
      <view class="list">
        <view class="item" v-for="item in list" v-if="array.includes(item.id)" @click.stop="clickId(item.id)">
          <view class="icon"><image mode="aspectFit" :src="image_host+item.icon"></image></view>
          <view class="title">{{item.title}}</view>
        </view>
      </view>
      <view class="cancel" @click.stop="hidePop">取消</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contentStyle:"",
      show:false,
      operationBoxStyle:"",
      image_host:this.image_host+'quanzi/',
      list:[
        {id:1,title:'取消关注',icon:'icon_quxiao.png'},
        {id:2,title:'置顶',icon:'icon_zhiding.png'},
        {id:3,title:'取消置顶',icon:'icon_quxiaozhiding.png'},
      ],
      array:[]
    };
  },
  methods:{
    // 显示组件
    showPop(array){
      this.array=array
      this.show=true;
      setTimeout(()=>{
        this.contentStyle="background-color: rgba(0,0,0,.7);"
        this.operationBoxStyle="height: 420rpx;padding: 50rpx 80rpx;"
      },100)
    },
    // 隐藏组件
    hidePop()
    {
      this.contentStyle=""
      this.operationBoxStyle=""
      setTimeout(()=>{
        this.show=false
      },300)
    },
    clickId(id)
    {
      this.$emit('clickId',id)
      this.hidePop()
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: rgba(0,0,0,0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: all .3s linear;
}
.operation-box{
  position: absolute;
  width: 100%;
  height: 0upx;
  background-color: #fff;
  border-radius: 30upx 30upx 0 0;
  left: 0;
  bottom: 0;
  transition: all .3s linear;
  box-sizing: border-box;
}
.list{
  width: 100%;
  display: flex;
  align-items: center;
  margin-right: 120upx;
}
.item{
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.icon{
  width: 106upx;
  height: 106upx;
  border-radius: 50%;
  background-color: #F1F2F6;
}
.icon image{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.title{
  font-size: 32upx;
  color: #666666;
  margin-top: 12upx;
}
.cancel{
  font-size: 32upx;
  color: #666666;
  text-align: center;
  margin-top: 67upx;
}
</style>
